<template lang="html">
  <div id="headerCom">
		<el-row class="block-col-2">
			<el-col :span="12">
				<div class="divLeft">
					
				</div>
				<div class="title divLeft">龙腾四海管理系统</div>
			</el-col>
			<el-col :span="12" style="text-align:right" class="menu">

				<ul class="header-ops">
					<li>
					<div class="btn-bell" >
						<el-tooltip style="color:#fff;" effect="dark" :content="message?`有${message}条未读消息`:`消息中心`" placement="bottom">
							<router-link to="/tabs">
								<i class="el-icon-bell"></i>
							</router-link>
						</el-tooltip>
						<span class="btn-bell-badge" v-if="message"></span>
					</div>
					</li>
					<li>{{userName}}</li>
					<li @click="loginOut">退出</li>
				</ul>
			</el-col>
		</el-row>
	</div>
</template>
<script>
export default {
	data(){
		return {
			message:'',
			userName:''
		}
	},
	created() {
		var _this = this;
		var userTokenStr = localStorage.getItem(_this.globalConfig.sessionKey.ltsh_session_user_token);
		var userToken = JSON.parse(userTokenStr);
		this.userName = userToken.name;
	},
	methods:{
		loginOut(){
			let _this = this;
			localStorage.removeItem(_this.globalConfig.sessionKey.ltsh_session_user_token);
			_this.myUtils.appRequest({
				method: "post",
				url: "/java/sys/user/loginOut",
				data: { content: { } },
				callback: function(data) {
					window.location="/login"
				}
			},_this);
		},
		
	}
}
</script>
<style>
.header-ops {
	list-style: none;
	float:right;
	padding:0px;
	margin:0px;
	text-align: right;
}
.header-ops li {
	float:left;
	padding-left:20px;
}
#headerCom {
	height:54px;
	background-color: rgb(64, 158, 255);
	color:#fff;
}
#headerCom .logo{
	width:50px;
	height:50px;
}
#headerCom .fenge{
	padding-left:5px;
	padding-right:2px;
}
#headerCom .title {
	font-size: 14px;
	line-height: 60px;
	padding-right:15px;
}
#headerCom .menu {
	font-size: 14px;
	line-height: 60px;
	padding-right:15px;
}
#headerCom .divLeft{
	float:left;
}
</style>
